.home {
  position: relative;

  .op {
    width: 100vw;
    height: 200px;
    background: linear-gradient(to bottom, #3ba3fd, #e2fafd);

    .top {
      display: flex;

      .left,
      .right {
        width: 70px;
        padding-left: 10px;
      }

      .left {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .message-container {
          width: 28px;
          height: 28px;
          background-color: #fff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          .message {
            width: 26px;
            height: 26px;
            background: linear-gradient(to top, #49a6ed, #8ac6eb);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            .message-icon {
              margin-bottom: 3px;
            }

            .message-text {
              font-size: 10px;
              color: #fff;
              position: absolute;
              top: 23px;
            }
          }
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 73px;

        .jinbi,
        .qiandao {
          height: 35px;
          padding-left: 5px;
          background-color: #c9ebff;
          border-radius: 18px 0 0 18px;
          display: flex;
          align-items: center;
          line-height: 35px;
          color: #0c746a;

          image {
            width: 25px;
            height: 25px;
          }
          text {
            margin-left: 3px;
          }
        }

        .jinbi {
          font-size: 16px;
          font-weight: 600;
        }
        .qiandao {
          font-size: 12px;
        }
      }

      .center {
        height: 100px;
        flex: 1;
        text-align: center;
        line-height: 100px;
        color: #fff;
        font-size: 35px;
        margin: 0;
        font-style: italic;
      }
    }

    .floating-bubble {
      padding: 0 30px;
      height: 100px;
      display: flex;
      justify-content: space-around;

      .bubble-box {
        position: relative;
        flex: 1;

        .bubble {
          height: 50px;
          width: 50px;
          border-radius: 50%;
          position: absolute;
          left: 50%;
          transform: translate(-50%, -50%);
          background: radial-gradient(circle at 100% 100%, #7ddcab, #72e3ac);
          box-shadow:
            0 10px 10px rgba(120, 228, 183, 0.1),
            inset 0 10px 10px rgba(61, 194, 165, 0.8),
            inset 0 -10px 10px rgba(148, 238, 185, 0.1);
          text-align: center;
          line-height: 50px;
          color: #fff;
          font-size: 20px;
        }

        .bubble-transition {
          // display: none;
          animation: fadeUp 2s ease-out;
        }

        @keyframes fadeUp {
          0% {
            opacity: 1;
            transform: translateX(-25px) translateY(-18px);
          }
          100% {
            opacity: 0;
            transform: translateX(-25px) translateY(-50px);
          }
        }
      }
    }
  }

  .steps {
    height: 170px;
    background: url('../../assets/image/home.png');
  }

  .shop {
    width: 100%;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
    position: absolute;
    top: 365px;

    .icon {
      width: 30px;
      height: 3px;
      background-color: #e2e2e2;
      margin: 10px auto 20px auto;
    }
  }
}